<template>
  <div class="table_layout ">
    <div class="table_title" flex="main:justify cross:center">
      <div flex>
        <p>创建人：{{ tableData.creator || '--' }}</p>
        <p style="margin-left:20px">创建时间：{{ tableData.createTime || '--' }}</p>
      </div>
      <div>
        <template v-if="!patternIsEdit">
          <el-button class="margin_left_10" type="primary" plain size="mini" @click="showShare = true">分享</el-button>
          <el-button class="margin_left_10" size="mini">打印</el-button>
          <el-button v-if="$store.state.archives.flag !== 2" class="margin_left_10" size="mini" type="warning" plain @click="patternIsEdit = true">编辑</el-button>
        </template>
        <template v-else>
          <el-button class="margin_left_10" size="mini" plain type="success" :loading="loading" @click="handleSave">保存</el-button>
          <el-button class="margin_left_10" size="mini" plain type="danger" @click="handleGetData">取消</el-button>
        </template>
      </div>
    </div>
    <div class="table_containter">
      <div class="container_title">
        <p>{{ $store.state.user.departmentName }}</p>
        <h1>火灾事故简易调查认定书</h1>
      </div>
      <p flex="main:justify">
        <span />
        <span>萧消火认简字〔2021〕第0036号</span>
      </p>
      <table border="1" cellspacing="0" cellpadding="0" class="table_content">
        <tr>
          <td>起火单位（个人）</td>
          <td colspan="3">
            <input v-if="patternIsEdit" v-model="tableData.unit" type="text">
            <span v-else>{{ tableData.unit }}</span>
          </td>
          <td>法定代表人/主要负责人</td>
          <td>
            <input v-if="patternIsEdit" v-model="tableData.legalPerson" type="text">
            <span v-else>{{ tableData.legalPerson }}</span></td>
        </tr>
        <tr>
          <td>起火地址</td>
          <td colspan="3">
            <input v-if="patternIsEdit" v-model="tableData.address" type="text">
            <span v-else>{{ tableData.address }}</span></td>
          <td>联系电话</td>
          <td>
            <input v-if="patternIsEdit" v-model="tableData.phone" type="text">
            <span v-else>{{ tableData.phone }}</span></td>
        </tr>
        <tr>
          <td>报警时间</td>
          <td colspan="3">
            <div v-if="patternIsEdit" class="box">
              <input v-model="tableData.alarmTimeDate" class="custom_input" type="date">
              <input v-model="tableData.alarmTimeTime" class="custom_input" type="time">
            </div>
            <span v-else>{{ tableData.alarmTime }}</span>
          </td>
          <td>直接财产损失统计(元)</td>
          <td>
            <input v-if="patternIsEdit" v-model="tableData.loss" type="text">
            <span v-else>{{ tableData.loss }}</span></td>
        </tr>
        <tr>
          <td>现场 <br> 调查 <br>走访 <br>情况</td>
          <td colspan="5" style="height:300px;vertical-align: top;text-align: left;padding:10px">
            <textarea v-if="patternIsEdit" v-model="tableData.view" />
            <span v-else>{{ tableData.view }}</span>
          </td>
        </tr>
        <tr>
          <td>火灾 <br> 事故 <br>事实</td>
          <td colspan="5" style="height:300px;vertical-align: top;text-align: left;padding:10px">
            <textarea v-if="patternIsEdit" v-model="tableData.fact" />
            <span v-else>{{ tableData.fact }}</span>
          </td>
        </tr>
        <tr>
          <td>告 知</td>
          <td colspan="5">
            根据《火灾事故调查规定》第三十六条第一款第四项的规定，适用简易调查程序作
            出的火灾事故认定，公安机关消防机构不予受理复核申请。
          </td>
        </tr>
        <tr>
          <td>当事人有无异 <br> 议及签名</td>
          <td colspan="5">
            <input v-if="patternIsEdit" v-model="tableData.sign" type="text">
            <span v-else>{{ tableData.sign }}</span>
          </td>
        </tr>
        <tr>
          <td>调查人员 <br> 签名</td>
          <td colspan="3">
            <input v-if="patternIsEdit" v-model="tableData.investigators" type="text">
            <span v-else>{{ tableData.investigators }}</span>
          </td>
          <td>公安机关消防机构印章及认定日期</td>
          <td>
            <input v-if="patternIsEdit" v-model="tableData.confirmationTime" type="date">
            <span v-else>{{ tableData.confirmationTime }}</span>
          </td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="5">
            <input v-if="patternIsEdit" v-model="tableData.remark" type="text">
            <span v-else>{{ tableData.remark }}</span>
          </td>
        </tr>
      </table>
      <p class="margin_top_20">一式两份，交当事人一份，存档一份。</p>
    </div>
    <!-- <transition name="el-zoom-in-center">
      <div v-show="patternIsEdit" class="table_shade" />
    </transition> -->
    <shareComponent v-model="showShare" />
  </div>

</template>

<script>
import { parseTime } from '@/utils/time'
// import { requestSave, requestGetById } from '@/api/home'
import shareComponent from './share'
export default {
  components: { shareComponent },
  data() {
    return {
      showShare: false,
      patternIsEdit: false,
      loading: false,
      url: '/confirmationEasy',
      tableData: {
        'address': 'string',
        'alarmTime': parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
        'alarmTimeDate': parseTime(new Date(), '{y}-{m}-{d}'),
        'alarmTimeTime': parseTime(new Date(), '{h}:{i}'),
        'archivesId': 0,
        'confirmationTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'fact': 'string',
        'flag': 0,
        'id': 0,
        'idCard': 'string',
        'investigators': 'string',
        'investigatorsTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'legalPerson': 'string',
        'loss': 'string',
        'no': 'string',
        'phone': '18888888888',
        'remark': 'string',
        'sign': 'string',
        'signTime': '2021-05-18 07:20:04',
        'title': 'string',
        'unit': 'string',
        'view': 'string'
      }
    }
  },
  created() {
    this.handleGetData()
  },
  methods: {
    handleSave() {
      const formData = JSON.parse(JSON.stringify(this.tableData))
      formData.archivesId = this.$route.query.archivesId
      formData.alarmTime = `${formData.alarmTimeDate} ${formData.alarmTimeTime}:00`
      formData.confirmationTime = `${formData.confirmationTime} 00:00:00`
      formData.investigatorsTime = `${formData.investigatorsTime} 00:00:00`
      formData.title = '火灾事故简易调查认定书'
      requestSave(formData, this.url).then(res => {
        this.$message.success('操作成功')
        this.$router.replace({ path: this.$route.path, query: { itemId: res.data, ...this.$route.query, isEdit: false }})
        this.handleGetData()
      })
    },
    handleGetData(come) {
      const itemId = this.$route.query.itemId
      this.patternIsEdit = come ? false : JSON.parse(this.$route.query.isEdit || 'false')
      if (!itemId) return
      requestGetById({ id: itemId }, this.url).then(res => {
        const formData = res.data
        formData.confirmationTime = parseTime(formData.confirmationTime, '{y}-{m}-{d}')
        formData.investigatorsTime = parseTime(formData.investigatorsTime, '{y}-{m}-{d}')
        formData.alarmTimeDate = parseTime(formData.alarmTime, '{y}-{m}-{d}')
        formData.alarmTimeTime = parseTime(formData.alarmTime, '{h}:{i}')
        this.tableData = formData
      })
    }

  }
}
</script>

